---
title: Material Property Definition
---

Developers use the `Editor` module to customize material properties bound to this `Shader`. The `Galacean` editor automatically reflects these material properties to the Inspector panel of the material asset.

<div style={{display: "flex"}}>

  <Image src="https://mdn.alipayobjects.com/huamei_aftkdx/afts/img/A*mwAxRr45kE8AAAAAAAAAAAAAeteEAQ/fmt.webp" width="435px" />

  <Image src= "https://mdn.alipayobjects.com/huamei_aftkdx/afts/img/A*7MrxTIG5fpkAAAAAAAAAAAAAeteEAQ/fmt.webp" width="200px" />

</div>

## Editor Module Syntax Skeleton

```glsl showLineNumbers
Editor {
    Properties {
        material_BaseColor("Offset unit scale", Color) = (1,1,1,1);
        ...

        Header("Emissive")
        {
            material_EmissiveColor("Emissive color", Color) = (1,1,1,1);
            ...
        }
        ...
    }

    ...

    Macros {
        [On] UV_OFFSET("UV Offset", Range(1,100)) = 10;
        ...

        Header("") {
            SOME_MACRO("label", Int) = 1;
        }
    }

    ...

    // Specifies the path to the UIScript project in the editor.
    UIScript "./shaderScript.ts";
}
```

### Material Property Definition

```glsl
/**
 * @language zh
 * Comments description
 */

/**
 * @language en
 * 注释描述
 */
propertyName("Description", EditType) = [DefaultValue];
```

<Callout type="info">

1. Use the `Header` directive to group related properties. The Inspector panel will reflect this hierarchy:

```
Header("Emissive") {
    material_EmissiveColor("Emissive color", Color) = (1,1,1,1);
    ...
}
```

2. Use comments to specify hover tooltips in the Inspector. The `@language` directive supports multilingual annotations.

</Callout>

The supported `EditType` list is as follows:

| EditType | Example |
| :-: | :-- |
| Bool | propertyName("Property Description", Boolean) = true; |
| Int | propertyName("Property Description", Int) = 1; <br/>propertyName("Property Description", Range(0,8)) = 1 <br/> propertyName("Property Description", Enum(Item1: 1, Item2: 2, Item3: 3)) = 1 // Enum |
| Float | propertyName("Property Description", Float) = 0.5; <br/>propertyName("Property Description", Range(0.0, 1.0)) = 0.5; <br/> propertyName("Property Description", Enum(Item1: 1.0, Item2: 2.0, Item3: 3.0)) = 1.0; // Enum |
| Texture2D | propertyName("Property Description", Texture2D); |
| TextureCube | propertyName("Property Description", TextureCube); |
| Color | propertyName("Property Description", Color) = (0.25, 0.5, 0.5, 1); |
| Vector2 | propertyName("Property Description", Vector2) = (0.25, 0.5); |
| Vector3 | propertyName("Property Description", Vector3) = (0.25, 0.5, 0.5); |
| Vector4 | propertyName("Property Description", Vector4) = (0.25, 0.5, 0.5, 1.0); |

#### Enum Type

```glsl showLineNumbers
propertyName("Property Description", Enum(Item1: 1, Item2: 2, Item3: 3)) = 1;
```

<Callout type="warning">
  Only Int and Float types support enums currently. Mixed type enums (e.g., combining Int and Float) are not supported. The following example will not be parsed correctly:

  ```glsl
  propertyName("Property Description", Enum("Item1":1, "Item2":2.0, "Item3": 3)) = 2.0;
  ```
</Callout>

### Material Macro Property Definition

Used to reflect macros used in the Shader to the Inspector, enabling flexible adjustments to Shader-dependent macros in the editor.

```glsl showLineNumbers
// Enabled/Disabled
[On/Off]macroName("MacroLabel", EditType) = [DefaultValue];
```

The `[On/Off]` directive specifies the macro's default state. The editor currently supports the following macro types:

|  Type   | Example                                                                                                   |
| :-----: | :-------------------------------------------------------------------------------------------------------- |
| No-Value Macro | macroName("Macro Description");                                                                           |
|  Bool   | macroName("Macro Description", Boolean) = true;                                                           |
|   Int   | macroName("Macro Description", Int) = 1; <br/> macroName("Macro Description", Range(0,8)) = 1;            |
|  Float  | macroName("Macro Description", Float) = 0.5; <br/> macroName("Macro Description", Range(0.0, 1.0)) = 0.5; |
|  Color  | macroName("Macro Description", Color) = (0.25, 0.5, 0.5, 1);                                              |
| Vector2 | macroName("Macro Description", Vector2) = (0.25, 0.5);                                                    |
| Vector3 | macroName("Macro Description", Vector3) = (0.25, 0.5, 0.5);                                               |
| Vector4 | macroName("Macro Description", Vector4) = (0.25, 0.5, 0.5, 1.0);